<template>
	<div style="height: 100%;" v-loading.fullscreen.lock="loading" element-loading-text="请喝杯咖啡稍等一下,正在加载中"
	 element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<h1><i class="el-icon-lx-cascades"></i> 文章历史</h1>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div style="padding: 6%;" class="block">
			<el-timeline>
				<el-timeline-item :timestamp="articleItem.create_time| formatDate" placement="top" :key="articleItem.title" size="large"
				 v-for="articleItem in articleListData" @click.native="on_click(articleItem)" icon="el-icon-star-on">
					<el-card @click.native="on_click(articleItem)">
						<h4>{{articleItem.title}}</h4>
						<p>{{articleItem.create_time| formatDate}}</p>
					</el-card>
				</el-timeline-item>
			</el-timeline>
			<!-- <el-steps direction="vertical" :space="100" :active="100">
				<template v-for="articleItem in articleListData" @click.native="on_click(1)">
					<el-step @click.native="on_click(articleItem)" :title="articleItem.title" icon="el-icon-star-on" :key="articleItem.article_id"
					 :description="articleItem.create_time| formatDate"></el-step>
				</template>
			</el-steps> -->
		</div>
	</div>
</template>

<script>
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	export default {
		name: 'myfrontIndex',
		data() {
			return {
				url: {
					get_article_list: constHelp['WEBAPIURL'] + '/blogManage/get_article_list',
					// 获取文章类型
					get_article_category_all_list: constHelp['WEBAPIURL'] + '/articleCategory/get_article_category_all_list',
				},
				articleListData: [],
				cur_item: {},
				loading: true,
				article_categoryOptions: {}, // 分类
				Article_top_list: {}, //最新文章

			};
		},
		metaInfo: {
			title: '自由的个人博客', // set a title
			meta: [{ // set meta
				name: '自由的个人博客,技术学习,在线工具,素材收集,文章浏览,java面试题，python全栈',
				content: '自由的个人博客，向往自由，希望自己的梦想可以实现，平凡的生活，在技术的海洋里让梦想启航。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
		//初期化页面
		created() {
			this.get_article_list()
		},
		filters: {
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			},
			formatContent(val) {
				return val;
			}
		},
		// 监听
		computed: {

		},
		methods: {

			on_click(item) {
				let routeUrl = this.$router.resolve({
					path: '/ArticleDetail',
					name: 'ArticleDetail',
					query:{
						"article_id": item.article_id
					}
				});
				window.open(routeUrl.href, '_blank');
			},
			// 获取用户文章列表
			get_article_list() {
				this.$axios.post(this.url.get_article_list, {
					page_index: 0,
					page_size: 99999999,
					article_model: "1"
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.articleListData = res.data.data;
						this.total_page = res.data.total
						this.loading = false
					}
				})
			},
		},
	};
</script>

<style>
	.el-step__head:hover {
		color: #67c23a;
		border-color: #67c23a;
	}
</style>
